<template>
  <div class="article">
    <div class="article-wrapper" @click.stop="$emit('tap')">
      <div class="article-title">{{article.title}}</div>
      <div class="article-desc">描述</div>
      <div class="article-pic">
        <div class="article-img"></div>
      </div>
      <div class="article-tags">
        <van-tag type="primary">标签</van-tag>
        <van-tag type="primary">标签</van-tag>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'index',
    props: {
      article: {
        type: Object,
        default: () => ({})
      }
    }
  };
</script>

<style scoped lang="less">
  .article {
    padding: 16px;

    &-wrapper {
      background: #fff;
      border-right: 6px;
      padding: 12px;
    }

    &-title {
      margin-bottom: 8px;
      font-size: 16px;
      font-weight: 500;
    }

    &-desc {
      margin-bottom: 6px;
    }

    &-pic {
      height: 120px;
      border-radius: 4px;
      margin-bottom: 6px;
    }

    &-img {
      height: 100%;
      width: 100%;
      background: #ddd;
    }

    &-tags {
      display: flex;

      /deep/ .van-tag {
        margin-right: 4px;
      }
    }
  }
</style>
